<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Capex Workplace</title>
    <link href="Content/Kendo/2014.1.318/kendo.common.css" rel="stylesheet" />
    <link href="Content/Kendo/2014.1.318/kendo.silver.css" rel="stylesheet" />
    <link href="Content/Kendo/2014.1.318/kendo.capex.extended.css" rel="stylesheet" />
	<link href="Content/Kendo/2014.1.318/kendo.silver.mobile.css" rel="stylesheet" />
    <link href="Content/MainGrid.css" rel="stylesheet" />
    <link href="Content/exiros.css" rel="stylesheet" />
    <link href="Content/ProjectState.css" rel="stylesheet" />
    <link href="Content/Header.css" rel="stylesheet" />
    <link href="Content/ProjectDetails.css" rel="stylesheet" />
    <script src="Scripts/JQuery/jquery-1.9.1.js"></script>
    <script src="Scripts/Kendo/2014.1.318/Kendo.all.js"></script>
    <script src="Scripts/tracking.js"></script>
    <script src="Scripts/ProjectState.js"></script>
    <script src="Scripts/Header.js"></script>
    <script src="Scripts/TrackingDetails.js"></script>	
</head>

<body id="body-style">
    <div id="header-container">
        <!-- Primera linea del encabezado logo Exiros -->
        <div id="header" class="clearfix">
            <h1>Exiros</h1>
            <p><a href="">Logout</a>
            </p>
        </div>
        <!-- Segunda linea del encabezado Nombre de la aplicacion -->
        <div id="subheader" class="clearfix">
            <!-- Menu ppal de módulos -->
            <div id="menu_header">
                <div class="app_menu_icon_line" style="margin-bottom: 3px;">
                </div>
                <div class="app_menu_icon_line" style="margin-bottom: 3px;">
                </div>
                <div class="app_menu_icon_line">
                </div>
            </div>
            <h2><a>Capex Workplace</a></h2>
            <div id="nav">
                <ul>
                    <li><a href="Index.html">Project</a>
                    </li>
                    <li class="active"><a href="Tracking.html">Tracking</a>
                    </li>
                    <li><a href="#">Management</a>
                    </li>
                </ul>
            </div>
            <div id="user" class="dropdown">
                <a class="trigger-dropdown" style="background: url(Content/Images/avatar.jpg) no-repeat 12px center"><span>Javier BARRAZA</span></a>
            </div>
        </div>
    </div>
    <div id="ProjectState">
        <div class="menuState">
            <ul class="tipos_de_tablas">
                <li id="State_0"  class="active">
                    <a id="All" class="gradient" href="javascript:onClickStatus('0')">
                        <span class="cantidad">12</span>
                        All
                    </a>
                </li>
                <li id="State_2" class="">
                    <a id="Technical Tender" class="gradient" href="javascript:onClickStatus('2')">
                        <span class="cantidad">2</span>
                        Pending Confirmation
                    </a>
                </li>
                <li id="State_3" class="">
                    <a id="Technical Analysis" class="gradient" href="javascript:onClickStatus('3')">
                        <span class="cantidad">0</span>
                        Pending Delivery
                    </a>
                </li>
                <li id="State_4" class="">
                    <a id="Commercial Tender" class="gradient" href="javascript:onClickStatus('4')">
                        <span class="cantidad">1</span>
                        Committed
                    </a>
                </li>
                <li id="State_5" class="">
                    <a id="Negotiating" class="gradient" href="javascript:onClickStatus('5')">
                        <span class="cantidad">0</span>
                        Close
                    </a>
                </li>
            </ul>
        </div>
    </div>
	<div class="mainBody">
	<!-- Botonera ppal -->
	<div class="button-bar height-38 clearfix">
        <div class="button-group align-right">
			<button class="button icon icon-refresh no-text align-right spacer-left" title="Refresh"><span>Refresh</span></button>
			<button class="button icon icon-xls align-right spacer-left" title="Export to XLS"><span>Export to Excel</span></button>
        </div>
    </div> 
	<!-- Grilla ppal -->
    <div class="MainGrid">
        <div id="gridTracking"></div>
    </div>
	</div>
	<!-- Modulo de detalle inferior -->
    <div id="detail-module">
        <div id="detail-module-container">
            <div id="module-resizer" class="clearfix" >
                <p class="align-left">Select Project or Line above to view details</p>
                <h2 class="align-left">PO : 6600810233</h2>
                <div class="align-right">
                    <button class="button-view" id="btn-small-detail-module" title="Small-size view">Small</button>
                    <button class="button-view" id="btn-mid-detail-module" title="Mid-size view">Mid</button>
                    <button class="button-view" id="btn-full-detail-module" title="Full-size view">Full</button>
                </div>
            </div>
            <div id="detail-module-content">
                <div id="module-header" class="clearfix">
					<div id="divProjectProgress" class="align-left">
						<ul>
							<li class="k-label">
									<label for="pgbProject">Progress:</label>
									<div id="pgbProject" style="width: 545px;"></div>							
							</li>
						</ul>
					</div>
					<div class="align-right">
                        <div class="button-group border-right align-left">
							<input id="cmbStatesTracking" style="width: 250px;" />							
                        </div>
						<div class="button-group border-right align-left">
							<button type="button" id="btnLineAdd" class="k-button icon icon-add"><span>SAVE</span></button>
                        </div>
                        <div class="button-group align-left">
							<button type="button" id="btnLineCancel" class="k-button icon icon-cancel"><span>Cancel</span></button>
                        </div>						
                    </div>
                </div>
                <div id="module-content" class="clearfix" style="height:200px;" >
                    <div class="col30percent">
                        <ul>
                            <li>
                                <label for="txtProjectName">Supplier Name:</label>
                                <input type="text" class="k-textbox" id="txtProjectName" required="required" value="HP Company" readonly="true"  style="width:250px;" />
                            </li>
							 <li>
                                <label for="txtProjectName">Incoterm  1:</label>
                                <input type="text" class="k-textbox" id="txtProjectName" required="required" value="Data SAP 1" readonly="true" style="width: 250px;" />
                            </li>
							 <li>
                                <label for="txtProjectName">Incoterm 2:</label>
                                <input type="text" class="k-textbox" id="txtProjectName" required="required" value="Data SAP 2" readonly="true" style="width: 250px;" />
                            </li>
                        </ul>
                    </div>
                    <div class="col20percent">
                        <ul>
                            <li>
                                <label style="width: 100px;" for="dpCreationDate">Delivery Date:</label>
                                <input id="dpCreationDate" class="date-picker" name="dpDetails" value="4/28/2014" style="width: 150px;" />
                            </li>
                            <li>
                                <label style="width: 100px;"  for="dpNeedDate">Real Delivery Date: </label>
                                <input id="dpNeedDate" class="date-picker" name="dpDetails" value="7/31/2014" style="width: 150px;" />
                            </li>
							<li>
                                <label  style="width:100px;" for="ntxtAmount">Amount:</label>
                                <input id="ntxtAmount"  readonly="readonly" style="width: 150px;"/>
                            </li>
                            <li>
								<label  style="width:100px;" for="ntxtTotalAmount">Quantity:</label>
								<input id="ntxtTotalAmount" readonly="readonly" style="width: 150px;"></input>
                            </li>
                        </ul>
                    </div>				
                    <div class="col20percent ">
                        <ul>
							<li>
								<label  style="width: 150px;" for="rcgCriticallys">Sending Purchase Order to Supplier:</label>
								<input id="switchCriticallys" class="switchYesNo" style="width:100px"></input>
							</li>
							<li>
                                <label style="width: 150px;"  for="cmbPPL">Preliminary Packing List:</label>
								<input id="switchPPL" class="switchYesNo"  style="width:100px"></input>
                            </li>                          
							<li>
                                <label style="width: 150px;" for="cmbLetterCredict">Letter of Credit:</label>
								<input id="switchLetterCredict" class="switchLetterCredict"  /> 
                            </li>
							<li>
                                <label style="width: 150px;" for="cmbPList">Packing List:</label>
                                <input id="switchPList" class="switchYesNo"/>
                            </li>
                        </ul>
                    </div>
					<div class="col20percent ">
                        <ul>
							<li>
                                <label style="width: 80px;" for="cmbPAT">PAT:</label>
                                <input id="switchPAT"  class="switchYesNo" />
								<input id="dpPATDate" class="date-picker" name="dpDetails" value="4/28/2014" style="width: 100px;" />
                            </li>
							<li>
                                <label style="width: 80px;" for="cmbFAT">FAT:</label>
                                <input id="switchFAT" class="switchYesNo"/>
								<input id="dpFATDate" class="date-picker" name="dpDetails" value="4/28/2014" style="width: 100px;" />
                            </li>
							<li> 
                                <label style="width: 80px;" for="cmbDownpayment">Downpayment:</label>
								<input id="switchDownpayment" class="switchDownpayment" />
								<input id="dpDownpaymentDate" class="date-picker" name="dpDetails" value="4/28/2014" style="width: 100px;" />
                            </li>
							<li>
								<label style="width: 80px;" for="cmbDJAI">DJAI:</label>
                                <input id="cmbDJAI" style="width:100px;" />
                            </li>
							<li>
								<label  style="width: 80px;" for="txtProjectName">Field Blank:</label>
								<input type="text" class="k-textbox" id="txtProjectName" required="required" value="" readonly="true" style="width: 145px;" />
							</li>
                        </ul>
                    </div>
                </div>
                <div>
                    <div id="tabDetails">
                        <ul class="subnav">
							<li id="subnav_tab" class="active"  ><a href="#" divContent="ProjectContent">Project Detail</a>
                            </li>
                            <li id="subnav_tab" ><a href="#" divContent="lineCommentContent">Comments</a>
                             </li>                             
                        </ul>
                    </div>
                    <div id="contentTab" class="divHeaderWithButtons clearfix">
                        <div id="ProjectContent" class="divContent">
								<div id="linePurchaseOrdersHeader" class="divHeaderWithButtons clearfix">
									<div class="align-right">
										<div class="button-group border-right align-left">
											<button type="button" id="btnPOsAdd" class="k-button icon icon-add"><span>Reload PRoject</span></button>
										</div>					
									</div>
								</div>
								<div class="k-block k-block-entity">
									<div id="ProjectTrackingGrid">
									</div>
								</div>
                        </div>
                        <div id="lineCommentContent" class="divContent">
							<div id="lineSuppliersHeader" class="divHeaderWithButtons clearfix">
								<div class="align-left">
								</div>
								<div class="align-right">
									<div class="button-group border-right align-left">
										<button type="button" id="btnSuppliersAdd" class="k-button icon icon-add"><span>Excel Comments</span></button>
									</div>				
								</div>
							</div>
							<div class="k-block k-block-entity">
								<div id="commentsGrid">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
	

	<div id="winAddComment" align="center" style="display:none">
		<div id="addComment" class="standard-padding">
			<ul>
				<li class="align-left">
					<!-- <label for="txtComment">Your comment here:</label> -->
					<textarea rows="5" cols="87" id="txtComment"></textarea>
				</li>
			</ul>
		</div>
		<div id="buttonsWinAddComment" align="right" class="standard-padding">
			<button type="button" id="btnWinCommentAdd" class="k-button icon icon-check"><span>Save</span></button>
			<button type="button" id="btnWinCommentCancel" class="k-button icon icon-cancel"><span>Cancel</span></button>
		</div>
	</div>
	
	<span id="notification" style="display:none;"></span>
	
	<script id="successTemplate" type="text/x-kendo-template">        
		<div class="save-success">
			<img src="Content/Images/success-icon.png" />
			<h3>#= message #</h3>
		</div>
	</script>	
	
	
	
	<script id="errorTemplate" type="text/x-kendo-template">        
		<div class="line-creation-error">
			<img src="Content/Images/error-icon.png" />
			<h3>#= title #</h3>
			<p>#= message #</p>
		</div>
	</script>	
	<script>	
		$(".panelbar").kendoPanelBar({
			expandMode: "multiple", // single
			animation: {
				expand: {
				   duration: 100,
				   effects: "expandVertical"
			   }
		   }
		});
	</script>
</body>
</html>